<!--
 * @Author: your name
 * @Date: 2020-09-16 17:56:09
 * @LastEditTime: 2020-12-25 13:42:44
 * @LastEditors: 大司马
 * @Description: In User Settings Edit
 * @FilePath: \open-platform-ui\platform-pc-console\src\components\main\components\header-bar\custom-bread-crumb\custom-bread-crumb.vue
 -->
<template>
  <div class="custom-bread-crumb">
    <Breadcrumb :style="{ fontSize: `${fontSize}px` }" separator="/">
      <BreadcrumbItem v-for="item in list" :to="item.to" :key="`bread-crumb-${item.name}`">
        <common-icon style="margin-right: 4px;" :type="item.icon || ''" />
        <template v-if="list.length !== 1">
          <span>{{ showTitle(item) }}</span>
        </template>
        <span v-else>
          <router-link to="/home-page">应用首页</router-link>
          <!-- <router-link to="/home">/ 控制台首页</router-link> -->
        </span>
      </BreadcrumbItem>
    </Breadcrumb>
  </div>
</template>
<script>
import { showTitle } from '@/libs/util'
import CommonIcon from '_c/common-icon'
import './custom-bread-crumb.less'
export default {
  name: 'customBreadCrumb',
  components: {
    CommonIcon
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    fontSize: {
      type: Number,
      default: 14
    },
    showIcon: {
      type: Boolean,
      default: false
    }
  },
  mounted () {},
  methods: {
    showTitle (item) {
      return showTitle(item, this)
    },
    isCustomIcon (iconName) {
      return iconName.indexOf('_') === 0
    },
    getCustomIconName (iconName) {
      return iconName.slice(1)
    }
  }
}
</script>
